<template>
  <div>
    <form :model="params">
      <el-select v-model="params.siteId" placeholder="请选择站点">
        <el-option
          v-for="item in siteList"
          :key="item.siteId"
          :label="item.siteName"
          :value="item.siteId"
        ></el-option>
      </el-select>页面别名:
      <el-input v-model="params.pageAliase" placeholder="请输入内容" style="width:200px"></el-input>
      <el-button type="primary" @click="query" size="small">查询</el-button>
      <router-link
        :to="{path:'/cms/page/add',query:{
         page:this.params.page,
        siteId:this.params.siteId
       }}"
      >
        <el-button type="primary" size="small">新增页面</el-button>
      </router-link>
    </form>

    <el-table :data="list" style="width: 100%">
      <el-table-column prop="pageName" label="页面名称" width="120"></el-table-column>
      <el-table-column prop="pageAliase" label="别名" width="120"></el-table-column>
      <!-- <el-table-column
          prop="siteId"
          label="站点id"
          width="150">-->
        </el-table-column>
           <el-table-column
          prop="pageId"
          label="页面id"
          width="150">
      </el-table-column>
      <el-table-column prop="pageType" label="页面类型" width="100"></el-table-column>
      <el-table-column prop="pageWebPath" label="访问路径" width="150"></el-table-column>
      <el-table-column prop="pagePhysicalPath" label="物理路径" width="250"></el-table-column>
      <el-table-column label="编辑" width="100" align="center">
        <template slot-scope="scope" >
          <el-button size="mini" type="primary" @click="edit(scope.row.pageId)">编辑</el-button>
          <el-button size="mini" type="danger" @click="del(scope.$index, scope.row)">删除</el-button>
          <el-button size="mini" type="primary" @click="preview(scope.row.pageId)">预览</el-button>
        </template>
      </el-table-column>

      <el-table-column label="静态化" width="100">
        <template slot-scope="scope">
          <el-button size="small" type="primary" plain @click="generateHtml(scope.row.pageId)">静态化</el-button>
          <el-button size="small" type="primary" plain @click="postPage(scope.row.pageId)">发布</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :page-count="pageCount"
      :page-size="params.size"
      :current-page="params.page"
      @current-change="changePage"
      style="float:left"
    ></el-pagination>
  </div>
</template>
<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>

<script>
import * as cmsApi from "../api/cms";
import utilApi from "@/common/utils.js";
export default {
  data() {
    return {
      list: [
        {
          siteId: "5a751fab6abb5044e0d19ea1",
          pageId: "5a754adf6abb500ad05688d9",
          pageName: "index.html",
          pageAliase: "首页",
          pageWebPath: "/index.html",
          pageParameter: null,
          pagePhysicalPath: "F:\\develop\\xc_portal_static\\",
          pageType: "0",
          pageTemplate: null,
          pageHtml: null,
          pageStatus: null,
          pageCreateTime: "2018-02-03T05:37:53.256+0000",
          templateId: "5a962b52b00ffc514038faf7",
          pageParams: null,
          htmlFileId: "5a7c1c54d019f14d90a1fb23",
          dataUrl: null
        }
      ],
      pageCount: 3,
      params: {
        page: 1,
        size: 10,
        siteId: "",
        pageAliase: ""
      },
      siteList: [
        {
          siteId: "5a751fab6abb5044e0d19ea1",
          siteName: "首页"
        }
      ]
    };
  },
  created() {
    this.params.page = Number.parseInt(this.$route.query.page || 1);
    this.params.siteId = this.$route.siteId || "";
  },
  methods: {
    formatCreatetime(row, column) {
      var createTime = new Date(row.pageCreateTime);
      if (createTime) {
        return utilApi.formatDate(createTime, "yyyy-MM-dd hh:mm:ss");
      }
    },
    postPage(pageId) {
      this.$confirm("确认发布该页面吗?", "提示", {})
        .then(() => {
          this.listLoading = true;
          cmsApi.page_postPage(pageId).then(res => {
            if (res.success) {
              console.log("发布页面id=" + pageId);
              this.listLoading = false;
              this.$message.success("发布成功，请稍后查看结果");
            } else {
              this.$message.error("发布失败");
            }
          });
        })
        .catch(() => {});
    },
    edit(pageId) {
      this.$router.push({
        path: "/cms/page/edit/" + pageId,
        query: {
          // page: this.params.page,
          // siteId: this.params.siteId
        }
      });
    },
    //删除
    del(index, row) {
      this.$confirm("确认删除该记录吗?", "提示", { })
        .then(() => {
          this.listLoading = true;
          let pageId = row.pageId;
          cmsApi.page_del(pageId).then(res => {
            this.listLoading = false;
            if (res.success) {
              this.$message.success("删除成功");
              this.query();
            } else {
              this.$message.error("删除失败");
            }
          });
        })
        .catch(() => {});
    },
    changePage(page) {
      this.params.page = page;
      this.query();
    },
    query: function() {
      cmsApi
        .page_list(this.params.page, this.params.size, this.params)
        .then(res => {
          this.list = res.queryResult.list;
          this.pageCount = res.queryResult.total;
        });
    },
    changePage: function(page) {
      this.params.page = page;
      this.query();
    },
    preview:function(pageId){
      //打开浏览器窗口
      window.open("http://www.xuecheng.com/cms/preview/"+pageId);
    }
  },
  mounted() {
    this.query();
  }
};
</script>
